<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 test</title>
        <meta charset="utf8">

        <link href="canvas.css" rel="stylesheet" type="text/css">

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            var canvas;
            var ctx;
            var cx = 250;
            var cy = 250;
            var r = 100;
            var maxi = 500;
            var i = 0;
            var x, y;

            $(document).ready(function() {
                canvas = $("#myCanvas");
                ctx = canvas.get(0).getContext("2d");
                //canvas.attr("width", $(window).get(0).innerWidth);
                //canvas.attr("height", $(window).get(0).innerHeight);

                ctx.shadowBlur = 20;
            });

            $(window).resize(function() {
                canvas.attr("width", $(window).get(0).innerWidth);
                canvas.attr("height", $(window).get(0).innerHeight);
            });

            function Draw() {
                ++i;
                //ctx.strokeStyle = ctx.fillStyle = "#000000";
                //ctx.fillRect(0, 0, canvas.width(), canvas.height());
                //ctx.clearRect(0, 0, canvas.width(), canvas.height());

                //var gradient = ctx.createLinearGradient(0, 0, canvas.width(), canvas.height());
                var gradient = ctx.createRadialGradient(250, 250, 200, 200, 200, 15);
                gradient.addColorStop(0, "#ffffff");
                gradient.addColorStop(1, "#000000");
                ctx.fillStyle = gradient;
                ctx.fillRect(0, 0, canvas.width(), canvas.height());

                ctx.strokeStyle = ctx.fillStyle = "#f0f0f0";
                x = cx + r * Math.sin(i/maxi * Math.PI * 2);
                y = cy + r * Math.cos(i/maxi * Math.PI * 2);

                ctx.beginPath();
                ctx.shadowColor = "#ffff00";
                ctx.arc(cx, cy, 25, 0, Math.PI * 2, false);
                ctx.closePath();
                ctx.fill();

                ctx.beginPath();
                ctx.shadowColor = "#00ffff";
                ctx.arc(x, y, 10, 0, Math.PI * 2, false);
                ctx.closePath();
                ctx.fill();
            };

            //interval = setInterval(Draw, 50);
            interval = setTimeout(Draw, 50);
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="500" height="500">
        </canvas>
    </body>
</html>
